<!doctype html>
<title>Canvas width and height attributes are used as the surface size</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/aspect-ratio.js"></script>
<style>
  canvas {
    width: 100%;
    max-width: 100px;
    height: auto;
  }
</style>
<body>
<canvas id="contained" width="250" height="100" style="contain: size;"></canvas>
<script>
function assert_ratio(img, expected) {
  let epsilon = 0.001;
  assert_approx_equals(parseInt(getComputedStyle(img).width, 10) / parseInt(getComputedStyle(img).height, 10), expected, epsilon);
}

function test_computed_style(width, height, expected) {
  test_computed_style_aspect_ratio("canvas", {width: width, height: height}, expected);
}

test(function() {
  canvas = document.getElementById("contained");
  assert_ratio(canvas, 2.5);
}, "Canvas width and height attributes are used as the surface size with contain:size");

// Create and append a new canvas and immediately check the ratio.
test(function() {
  var canvas = document.createElement("canvas");
  canvas.setAttribute("width", "250");
  canvas.setAttribute("height", "100");
  document.body.appendChild(canvas);
  // Canvases always use the aspect ratio from their surface size.
  assert_ratio(canvas, 2.5);
}, "Canvas width and height attributes are used as the surface size");

test(function() {
  test_computed_style("10", "20", "auto 10 / 20");
  test_computed_style("0", "1", "auto 0 / 1");
  test_computed_style("1", "0", "auto 1 / 0");
  test_computed_style("0", "0", "auto 0 / 0");
  test_computed_style("0.5", "1.5", "auto 0.5 / 1.5");
}, "Computed style");

test(function() {
  test_computed_style(null, null, "auto");
  test_computed_style("10", null, "auto");
  test_computed_style(null, "20", "auto");
  test_computed_style("xx", "20", "auto");
  test_computed_style("10%", "20", "auto");
}, "Computed style for invalid ratios");

</script>
